<template>
    <div id="count">
        <el-card>
            <div slot="header">
                <span>统计分析</span>
            </div>
            <ve-pie :data="countData"></ve-pie>
        </el-card>
        <el-card v-for="(row,index) in countRowData" :key="'row'+index">
            <ul style="float:left;display:inline-block">
                <li v-for="(con,index) in row.data.content" :key="'con'+index">{{con.text}} <el-tag type="primary">{{con.answerText}}</el-tag></li>
            </ul>
            <ve-histogram :data="row" :extend="extend" style="width:50%;float:right;display:inline-block"></ve-histogram>
        </el-card>
        
        
    </div>
</template>
<script>
export default {
    props:['paper_id'],
    data(){
        this.extend = {
        series: {
          barWidth: "35"
        }
      }
        return {
          countData:{
              columns:[],
              rows:[]
          },
          countRowData:[]
        }
    },
    created() {
        this.getCount();
        this.getCountRow();
    },
    methods:{
        getCount(){
            this.$http.get('/answer/count',{
                params:{
                    paper_id:this.paper_id
                }
            }).then(result =>{
                this.countData.columns = result.data.data.columns;
                this.countData.rows = result.data.data.rows;
            })
        },
        getCountRow(){
            this.$http.get('/answer/countrow',{
                params:{
                    paper_id:this.paper_id
                }
            }).then(result =>{
                this.countRowData = result.data.data;
                console.log(this.countRowData)
            })
        },
    }
}
</script>

<style>
.el-card{
    margin-bottom: 10px;
}
li{
    list-style: none;
}
</style>
